<template>
	<view class="input-box-container">
		<view class="input-box-content" @click="openMaskerComment">
			<text>谈谈你的看法</text>
			<uni-icons type="compose" size="16" color="#f07373"></uni-icons>
		</view>
		<view class="input-box-icon">
			<uni-icons @click="chat" type="chat" size="25" color="#f07373"></uni-icons>
			<Follow :articleId="item" followSize="25"></Follow>
			<uni-icons @click="hand" :type="isHand ? 'hand-up-filled':'hand-up'" size="25" color="#f07373"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: "InputBox",
		props: {
			item: String, //文章id
		},
		data() {
			return {

			};
		},
		computed: {
			// 是否 点赞 /取消点赞
			isHand() {
				try {
					return this.userInfo && this.userInfo.thumbs_up_article_ids.includes(this.item)
				} catch (e) {
					return false
				}

			}
		},
		methods: {
			//输入框弹出
			openMaskerComment() {
				this.$emit("openMaskerComment")
			},
			//进入文章列表
			chat() {
				uni.navigateTo({
					url: `/pages/comments/comments?id=${this.item}`
				})
			},
			//点赞 /取消点赞
			async hand() {
				await this.checkedisLogin()
				const {
					msg
				} = await this.$http.updata_compliments({
					articleId: this.item,
					userId: this.userInfo._id
				})
				uni.showToast({
					title: msg,
					icon: "none"
				})
				//修改store之前储存的数据
				let complimentsIds = [...this.userInfo.thumbs_up_article_ids]
				if (complimentsIds.includes(this.item)) {
					//取消点赞
					complimentsIds = complimentsIds.filter(item => item !== this.item)
					this.$emit('thumbsCount', 'sub')
				} else {
					//点赞
					complimentsIds.push(this.item)
					this.$emit('thumbsCount', 'add')
				}

				this.updetaUserInfo({
					...this.userInfo,
					thumbs_up_article_ids: complimentsIds
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'css/InputBox.scss'
</style>
